<template>
  <div style="display: flex;background-color: antiquewhite">
    <div>
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item :title="tag.categoryName" v-for="tag in tagsData"/>
      </van-sidebar>
    </div>

    <div>
     <TagCard :tag-card-data="tagInfo"></TagCard>
    </div>
  </div>


  <div style="margin-top: 10px;text-align: center; display: flex; align-items: center; justify-content: center;">
    <van-image src="http://120.26.146.100:8889/public/selectRandom.png" style="width: 55px;height: auto;margin-right: 10px" fit="cover"/>
    <van-button type="warning" @click="addTagToIndex">进入程序员交友平台(已选 {{tagSelectNum}} 个)</van-button>
  </div>

</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {showToast} from "vant";
import {getAllTagAndCategory} from "../api/tagApi.ts";
import TagCard from "../components/tag/TagCard.vue";
import {updateUserTags} from "../api/userApi.ts";
import {userStore} from "../stores/user/user.ts";
import {useRoute, useRouter} from "vue-router";
interface TagVO {
  id: null;
  categoryName: string;
  tagNameIsSelectVOList: {
    tagName: string;
    select: boolean;
  }[];
}
const router = useRouter();
const route = useRoute();
const active = ref(0);//侧边栏
const tagInfo = ref();//某个分类的信息
const tagSelectNum = ref(0);//选中标签个数
const tagsData = ref<TagVO[]>();//所有标签信息
const userStoreAPI = userStore();
const gender = ref();//记录上一个页面传过来的gender
const currentUser = ref();

const onChange = (index) => {
  tagInfo.value = tagsData.value[index].tagNameIsSelectVOList;
  // showToast(`标签名 ${index + 1}`);
};

//进入我们的主页(同时更新用户的tags)
const addTagToIndex = async ()=>{
  //判断是否选中个数
  if(tagSelectNum.value < 3){
    showToast("请至少选择三个标签");
    return;
  }

  const tagNameList = tagsData.value.flatMap(item =>
      item.tagNameIsSelectVOList.filter(subItem => subItem.select).map(subItem => subItem.tagName)
  );
  console.log("选中的名称",tagNameList);
  //发送请求同时需要更新缓存
  const updateRequest = {
    tagNameList:tagNameList,
    gender: gender.value
  }
  const res = await updateUserTags(updateRequest);
  if (200 == res.code){
    currentUser.value.userStatus = 0;
    currentUser.value.tags = JSON.stringify(tagNameList);
    if (gender.value != null){
      currentUser.gender = 1;
    }
    userStoreAPI.setCurrentUser(currentUser);
    //跳转到主页
    router.push('/index');
  }

}



onMounted(async ()=>{
  //更新Pina缓存
  currentUser.value = await userStoreAPI.getCurrentUser();
  const res = await getAllTagAndCategory();
  if (200 == res.code){
    tagsData.value = res.data;
    console.log(JSON.stringify(res.data))
    tagInfo.value = tagsData.value[0].tagNameIsSelectVOList;
  }
  console.log('gender',route.query.gender);//拿到性别选择
  gender.value = route.query.gender;
});

//监听变化选中个数，tagsData.value就会报错！
watch(tagsData, (newValue, oldValue) => {
  let selectedCount = 0;
  newValue.forEach(tag => {
    const selectedItems = tag.tagNameIsSelectVOList.filter(item => item.select);
    selectedCount += selectedItems.length;
  });
  tagSelectNum.value = selectedCount;
}, { deep: true });



</script>

<style scoped>



</style>